<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>

<script>

    var selectID,fileName;

    $(function() {

        searchAction();
        dataListInit();
    })

    function searchAction() {
        $('#search_button').click(function() {
            tableRefresh();
        })
    }
    // 分页查询参数
    function queryParams(params) {

        var temp = {
            limit : params.limit,
            offset : params.offset,
            studentPhone:$('#studentPhoneSearch').val(),
            isPaid:$('#isPaidSearch').val()
        }
        return temp;
    }

    // 表格初始化
    function dataListInit() {
        $('#dataList').bootstrapTable(
            {
                columns : [{
                    checkbox: true,
                    align: 'center'
                }, {
                    title: 'ID',
                    formatter: function (value, row, index) {
                        return index+1;
                    },
                    align: "center"
                },
                    {
                        field : 'student_name',
                        title : '学生姓名'
                    },
                    {
                        field : 'phone',
                        title : '手机号'
                    },
                    {
                        field : 'lesson_name',
                        title : '课程名称'
                    },
                    {
                        field : 'lesson_class',
                        title : '年级'
                    },
                    {
                        field : 'teacher_name',
                        title : '教师'
                    },
                    {
                        title : '支付状态',
                        formatter: function (value, row, index) {
                            if(row.is_paid==1){
                                return '<font color="#31b0d5">已支付</font>';
							}else{
                                return '<font color="red">未支付</font>';
							}
						}
                    },
                    {
                        field : 'create_time',
                        title : '下单时间'
                    },
                    {
                        field : 'operation',
                        title : '操作',
                        width: 180,
                        align: 'center',
                        valign: 'middle',
                        formatter : function(value, row, index) {
                            var s = '<button id="editPaid" class="btn btn-info btn-sm editPaid"><span>确认支付</span></button>';
                            return s;
                        },
                        events : {
                            'click .editPaid' : function(e, value, row, index) {
                               editPaidStatus(row);
                            }
                        }
                    } ],
                url : '/onlineEdu/signUp/list',
                onLoadError:function(status){
                    handleAjaxError(status);
                },
                method : 'GET',
                queryParams : queryParams,
                sidePagination : "server",
                dataType : 'json',
                pagination : true,
                pageNumber : 1,
                pageSize: 10,
                pageList : [5, 10, 25, 50, 100 ],
                clickToSelect : true
            });
    }

    // 表格刷新
    function tableRefresh() {
        $('#dataList').bootstrapTable('refresh', {
            query : {}
        });
    }

    function editPaidStatus(row){

        selectID = row.sign_up_id;
        $("#ck"+row.is_paid).prop("checked","checked");
        $('#editPaid_modal').modal("show");
	}

    $('#edit_paid_confirm').click(function() {

        var data = {
            "id": selectID,
            "isPaid":$("input[name='pay']:checked").val()
        }
        $.ajax({
            type: "GET",
            url:"/onlineEdu/signUp/pay",
            dataType:"json",
            data:data,
            success:function(response){
                $('#editPaid_modal').modal("hide");
                showMsg('success', response.msg, '');
                tableRefresh();
            },
            error:function(xhr, textStatus, errorThrown){
                // handler error
                handleAjaxError(xhr.status);
            }
        });
    });

</script>
<div class="panel panel-default">
	<ol class="breadcrumb">
		<li><label class="form-label">订单管理</label></li>
	</ol>
	<div class="panel-body">
		<div class="row">
			<div style="width: 100%;margin-top: -16px" class="box-content">
				<table id="信息查询" class="table table-bordered table-hover table-responsive">
					<tbody>
					<tr>
						<td class="item-title" align="center">手机号</td>
						<td class="item-content-half">
							<input type="text" class="form-control" id="studentPhoneSearch" placeholder="">
						</td>
						<td class="item-title" align="center">支付状态</td>
						<td class="item-content-half">
							<select id="isPaidSearch" class="form-control">
								<option value="2">--全部--</option>
								<option value="1">已支付</option>
								<option value="0">未支付</option>
							</select>
						</td>
					</tr>
					</tbody>
				</table>
			</div>

			<%--</div>--%>
		</div>
		<div style="text-align: right">
			<button id="search_button" style="text-align: right" class="btn btn-success">
				<span class="glyphicon glyphicon-search"></span> <span>查询</span>
			</button>
		</div>
	</div>

	<div class="row" style="margin-top: 15px">
		<div class="col-md-12">
			<table id="dataList" class="table table-striped"></table>
		</div>
	</div>
</div>
</div>

<div class="modal fade" id="editPaid_modal" table-index="-1"
	 role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal"
						aria-hidden="true">&times;</button>
				<h4 class="modal-title" >确认支付</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="row">
						<div class="col-md-7 col-sm-7" style="margin-top: 5px;text-align: center">
							<label><input id="ck1" type="radio" name="pay" value="1" />支付 </label>
							<label><input style="margin-left: 15px" id="ck0" type="radio" name="pay" value="0" />取消支付</label>
						</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" type="button" data-dismiss="modal">
					<span>取消</span>
				</button>
				<button class="btn btn-danger" type="button" id="edit_paid_confirm">
					<span>确认</span>
				</button>
			</div>
		</div>
	</div>
	</div>
</div>